<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link type="text/css" th:href="@{/static/backstage/css/style.css}" rel="stylesheet"/>
</head>
<!--页面无法回退-->
<script>
    if (window.top !== window) {
        window.top.location.reload();
    }
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
    });
</script>
<body>
<div class="page">
    <div class="container">
        <div class="left">
            <div class="login">登录</div>
            <div class="eula">欢迎使用！</div>
        </div>
        <div class="right">
            <svg viewBox="0 0 320 300">
                <defs>
                    <linearGradient inkscape:collect="always"
                            id="linearGradient"
                            x1="13"
                            y1="193.49992"
                            x2="307"
                            y2="193.49992"
                            gradientUnits="userSpaceOnUse">
                        <stop
                                style="stop-color:#ff00ff;"
                                offset="0"
                                id="stop876" />
                        <stop
                                style="stop-color:#ff0000;"
                                offset="1"
                                id="stop878" />
                    </linearGradient>
                </defs>
                <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
            </svg>
            <div class="form">
                <form action="/" th:action="@{/Admin/login}" method="post">
                    <label for="username">登录名</label>
                    <input type="text" name="username" autocomplete="off" id="username" required>
                    <label for="password">密码</label>
                    <input type="password" name="password" autocomplete="off" id="password" required>
                    <input type="submit" id="submit" value="提交">
                </form>
            </div>
        </div>
        <div id="promptArea" style="display: block;width: 300px;height: 50px;position: absolute;top: 60%;left: 30%;text-align: center;line-height: 50px;color: red;font-weight: 600;">
            [[${msg}]]
        </div>
    </div>
</div>
<script th:src="@{/static/backstage/js/anime.min.js}"></script>
<script>

    <!-- 解决登录界面被iframe内嵌问题 -->
    if (window != top){
        top.location.href = location.href;
    }
    window.onload=function () {
        var current = null;
        document.querySelector('#username').addEventListener('focus', function(e) {
            if (current) current.pause();
            current = anime({
                targets: 'path',
                strokeDashoffset: {
                    value: 0,
                    duration: 700,
                    easing: 'easeOutQuart'
                },
                strokeDasharray: {
                    value: '240 1386',
                    duration: 700,
                    easing: 'easeOutQuart'
                }
            });
        });
        document.querySelector('#password').addEventListener('focus', function(e) {
            if (current) current.pause();
            current = anime({
                targets: 'path',
                strokeDashoffset: {
                    value: -336,
                    duration: 700,
                    easing: 'easeOutQuart'
                },
                strokeDasharray: {
                    value: '240 1386',
                    duration: 700,
                    easing: 'easeOutQuart'
                }
            });
        });
        document.querySelector('#submit').addEventListener('focus', function(e) {
            if (current) current.pause();
            current = anime({
                targets: 'path',
                strokeDashoffset: {
                    value: -730,
                    duration: 700,
                    easing: 'easeOutQuart'
                },
                strokeDasharray: {
                    value: '530 1386',
                    duration: 700,
                    easing: 'easeOutQuart'
                }
            });
        });
    }

</script>
</body>
</html>